<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/1.css">
    <link rel="stylesheet" href="../lib/bootstrap@3.3.4/css/bootstrap.min.css">
   <script src="../lib/flexible/flexible.debug.js"></script>
    <script src="../lib/flexible/flexible_css.debug.js"></script>
</head>
<body>
    <div class="wrapp">
        <div class="tb">
            <div class="t1"><img src="../img/1.png" alt=""><span class='glyphicon glyphicon-align-justify '></span></div>
        </div>
        <div class="q"></div>
        <div class="box">
            <div class="wrap">
                <ul class="list">
                    <li class="item"><img src="../img/2.png" alt=""></li>
                    <li class="item"><img src="../img/3.png" alt=""></li>
                    <li class="item"><img src="../img/4.png" alt=""></li>
                    <li class="item"><img src="../img/5.png" alt=""></li>
                    <li class="item"><img src="../img/6.png" alt=""></li>
                    <li class="item"><img src="../img/7.png" alt=""></li>
                    <li class="item"><img src="../img/7.png" alt=""></li>
                </ul>
                <ul class="dots">
                     <!-- <li class="current"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li> -->
                </ul>
            </div> 
       </div>
       <div class="box2">
           <div class="wrap2">
               <div class="list2">
                 <li>
                     <div class='li1'>
                         <div class='li11'><img src='../img/8.png'/></div>
                            <div class="li12"></div>
                            <div class='li13'>城市住宅</div>
                     </div>
                     <div class='li2'>
                        <div class='li21'><img src='../img/9.png'/></div>
                           <div class="li22"></div>
                           <div class='li23'>康旅度假 </div>
                    </div>
                 </li>
                 <li></li>
                 <li></li>
                 <li></li>
               </div>
           </div>

       </div>
    </div>
    <script>
         var wrap = document.querySelector('.wrap');
      var itemArr = document.querySelectorAll('.item');
      var dots = document.querySelector('.dots');
      var next = document.querySelector('.next');
      var pre = document.querySelector('.pre');
      var list = document.querySelector('.list');
      var index = 0;
      var dotsLength = itemArr.length;

      for(var i=0;i<dotsLength;i++){
          var liNode=document.createElement('li');
          liNode.index=i;
          dots.appendChild(liNode);
      }

      dots.children[0].className='current';


      // 克隆
      list.appendChild(itemArr[0].cloneNode(true));

      function move(index){
          var wrapWidth=wrap.offsetWidth;

          // list.style.left=-wrapWidth*index+'px';
          animate(list,-(wrapWidth*index))
          // for(var i=0;i<itemArr.length;i++){
          //     dots.children[i].className='';
          // }
          // dots.children[index].className='current';
          dotsLight(index);
      }



      function dotsLight(index){
          for(var i=0;i<dotsLength;i++){
              dots.children[i].className='';
          }
          if(index==dotsLength){
              index=0;
          }
          dots.children[index].className='current';
      }

      dots.addEventListener('click', function (e) {
            // if(e.target.nodeName == 'UL') return
            /* for (var i = 0; i < dots.children.length; i++) {
                dots.children[i].className = '';
            } */
            move(e.target.index);
        })


        function animate(obj, target) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var step = 9;
                var current = obj.offsetLeft;
             
                step = current < target ? step : -step;
                current = current + step;
             
                if (Math.abs(target - current) > Math.abs(step)) {
                    obj.style.left = current + 'px';
                } else {
                    clearInterval(obj.timer);
                    obj.style.left = target + 'px';
                }
            }, 10)
        }


        var timer=setInterval(function(){
            index++;
            if(index==itemArr.length) index=0;
            move(index);
        },600)
    </script>
    </body>
    </html>